import React, { PureComponent } from 'react';
import { Card, Flex } from 'antd-mobile';
import { connect } from '@@/plugin-dva/exports';
// @ts-ignore
@connect(({ global, list }) => ({ global, list }))
export default class Location extends PureComponent {
  changeLocation = () => {
    // @ts-ignore
    this.props.dispatch({ type: 'list/resetSource' });
    // @ts-ignore
    this.props.dispatch({ type: 'global/changLocation' });
    // @ts-ignore
    this.props.dispatch({
      type: 'list/getList',
      // @ts-ignore
      payload: this.props.global.searchParams,
      reset: true,
    });
  };

  render(): any {
    // @ts-ignore
    const { startPoint, endPoint } = localStorage;
    const img = require('../../../public/home/home_car.png');

    return (
      <Card
        full={false}
        className={'switch-location'}
        style={{ backgroundImage: `url(` + img + `)` }}
      >
        <Flex>
          <Flex.Item
            className="head_button"
            justify={'center'}
            align={'center'}
          >
            <span className={'location-font'}>{startPoint}</span>（始发地）
          </Flex.Item>
          <Flex.Item className="inline" justify={'between'} align={'start'} />
          {/*<Flex.Item className="inline" justify={'between'} align={'start'}/>*/}
        </Flex>
        <Flex>
          <Flex.Item
            className="head_button"
            justify={'center'}
            align={'center'}
          >
            <span className={'location-font'}>{endPoint}</span>（目的地）
          </Flex.Item>
          <Flex.Item className="inline" justify={'center'} align={'start'}>
            <span className={'switch-button'} onClick={this.changeLocation}>
              ⇋
            </span>
          </Flex.Item>
        </Flex>
      </Card>
    );
  }
}
